<!-- 统计图以及图层树组件 -->
<template>
  <div class="count-component">
    <!-- <el-tabs v-model="activeName" class="self-tabs">
      <el-tab-pane label="统计图" name="统计图">
        <section-one></section-one>
        <section-two></section-two>
      </el-tab-pane>
      <el-tab-pane label="图层树" name="图层树">
        <tree-of-l1></tree-of-l1>
      </el-tab-pane>
    </el-tabs> -->
    <div class="single-tabs-wrapper">
      <div class="single-tabs">
        <div class="single-tab" :class="[
          item.isPadding ? 'padding' : '',
          item.title === activeTabTitle ? 'active' : ''
        ]" @click="doSingleCheckTab(item)" v-for="(item, index) in tabs" :key="index">
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>

    <div v-show="activeTabTitle === '统计图'">
      <section-one></section-one>
      <section-two></section-two>
    </div>
    <div v-show="activeTabTitle === '图层树'">
      <tree-of-l1></tree-of-l1>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  reactive,
  ref
} from 'vue';
import SectionOne from './SectionOne.vue';
import SectionTwo from './SectionTwo.vue';
import SectionThree from './SectionThree.vue';
import SectionFour from './SectionFour.vue';
import TreeOfL1 from './TreeOfL1.vue'
export default defineComponent({

  name: 'CountAndTreeComponent',
  props: {},
  components: { SectionTwo, SectionOne, TreeOfL1, SectionThree, SectionFour },
  setup(props, { attrs, slots, emit }) {
    const tabs = reactive([{
      title: "",
      isPadding: true
    }, {
      title: "统计图"
    }, {
      title: "图层树"
    }, {
      title: "",
      isPadding: true
    }]);
    const activeTabTitle = ref("统计图")
    onMounted(() => {
    });
    //释放资源
    onBeforeUnmount(() => {
    });
    onUnmounted(() => {
    })
    return {
      tabs,
      activeTabTitle
    };
  },
  methods: {
    doSingleCheckTab(v) {
      if (v.isPadding) { return }
      this.activeTabTitle = v.title;
    }
  }
});
</script>
<style lang="less" scoped>
.count-component {
  width: 100%;
  height: 100%;

  &>.single-tabs-wrapper {
    height: 80px;
    display: flex;
    align-items: center;
    &>.single-tabs {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;

      &>.single-tab {
        padding-left: 30px;
        padding-right: 30px;
        color: #ffffff;
        font-weight: 400;
        font-size: 16px;
        cursor: pointer;
        height: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #42F4FF;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;

        &.padding {
          flex: 1;
          height: 100%;
          cursor: initial;

          &:nth-child(1) {
            transform: translateX(1px);
          }

          &:nth-last-child(1) {
            transform: translateX(-1px);
          }
        }

        &.active {
          color: #42F4FF;
          border-top: 1px solid #42F4FF;
          border-left: 1px solid #42F4FF;
          border-right: 1px solid #42F4FF;
          border-bottom: 1px solid transparent;
        }
      }
    }
  }
}
</style>